<template>
  <div>
    <div id="centreLeft1Chart" style="width:330px; height: 370px;" />
  </div>
</template>

<script>
const echarts = require('echarts')
export default {
  data() {
    return {}
  },
  mounted() {
    this.getWtyj_chaozsJgsFx()
  },
  destroyed() {
    window.onresize = null
  },
  methods: {
    async getWtyj_chaozsJgsFx() {
      try {
        // 请求后台接口
        const res = await Sever.analyse.getWtyj_chaozsJgsFx({
          // 请求参数
          dep_code: '450000'
        })
        if (res.length == 0) {
          // 初始化data中的数值
          Object.assign(this.$data, this.$options.data())
        } else {
          // 取值赋给dep,bz,sy
          res.map(item => {
            // this.option.xAxis.data = item.DEP.split(',')
            // this.option.series[0].data = item.NUM.split(',').map(Number)
          })
        }
        this.drawPie()
      } catch (error) {
        console.log(error)
        Object.assign(this.$data, this.$options.data())
        this.drawPie()
      }
    },
    drawPie(sidebar) {
      // 基于准备好的dom，初始化echarts实例
      const myChartPieLeft = echarts.init(
        document.getElementById('centreLeft1Chart')
      )
      //  ----------------------------------------------------------------

      const option = {
        radiusAxis: {
          min: 0,
          // max: 100,
          interval: 20,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#00c7ff',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            show: false,
            formatter: '{value}',
            padding: [0, 0, 20, 0],
            color: '#00c7ff',
            fontSize: 16
          },
          splitLine: {
            lineStyle: {
              color: '#00c7ff',
              width: 1,
              type: 'solid'
            }
          }
        },
        angleAxis: {
          type: 'category',
          data: [
            '内设机构领导副职',
            '内设机构领导正职',
            '部门其他工作机构领导副职',
            '部门其他工作机构领导正职',
            '部门其他领导副职',
            '部门其他领导正职',
            '部门领导副职',
            '部门领导正职',
            '领导（党委、人大、政府、政协） '
          ],
          axisLine: {
            show: true,
            lineStyle: {
              color: '#00c7ff',
              width: 1,
              type: 'solid'
            }
          },
          axisLabel: {
            width: '50',
            overflow: 'break',
            interval: 0,
            show: true,
            color: '#00c7ff',
            margin: 3,
            fontSize: 12
          }
        },
        polar: {
          radius: '70%'
        },
        tooltip: {},
        series: [
          {
            type: 'bar',
            radius: ['20%', '100%'],
            data: [87, 80, 75, 69, 63, 54, 47, 40, 35],
            colorBy: 'data',
            coordinateSystem: 'polar'
          }
        ]
      }
      myChartPieLeft.setOption(option)
      myChartPieLeft.on('click', function(params) {
        window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name))
      })
      // -----------------------------------------------------------------
      // 响应式变化
      window.addEventListener('resize', () => myChartPieLeft.resize(), false)
      // 侧边栏变化
      if (sidebar) {
        myChartPieLeft.resize()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
